<template>
    <div>
      <LocationFilter @filterChanged="handleFilterChange" /> 
      <el-row :gutter="20">
        <el-col v-for="location in filteredLocations" :key="location.id" :span="12">
          <el-card class="location-card" :body-style="{ padding: '20px', display: 'flex', alignItems: 'center' }">
            <div class="image-container">
              <img :src="location.photo" class="location-photo" alt="Location Photo" />
            </div>
            <div class="location-details">
              <h3 class="location-name">{{ location.name }}</h3>
              <p>位置: {{ location.address }}</p>
              <p>类型: {{ location.type }}</p>
              <p class="location-number">{{ location.number }} 人预约</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import LocationFilter from '@/components/Location/LocationFilter.vue'; 
  
  const props = defineProps({
    locations: {
      type: Array,
      required: true
    }
  });
  
  const selectedType = ref('');
  const searchTerm = ref('');
  
  const filteredLocations = computed(() => {
    return props.locations.filter(location => {
      const matchesType = selectedType.value ? location.type === selectedType.value : true;
      const matchesSearch = searchTerm.value ? location.name.includes(searchTerm.value) : true;
      return matchesType && matchesSearch;
    });
  });
  
  // 更新过滤条件
  const handleFilterChange = (filter) => {
    selectedType.value = filter.type;
    searchTerm.value = filter.search;
  };
  </script>
  
  <style scoped>
  .location-card {
    margin-bottom: 20px; /* 卡片之间的间距 */
    display: flex;
    align-items: center; /* 纵向居中对齐内容 */
    height: 220px; /* 固定卡片高度 */
  }
  
  .image-container {
    width: 200px; /* 固定图片容器宽度 */
    height: 200px; /* 固定图片容器高度 */
    overflow: hidden; /* 隐藏超出部分 */
  }
  
  .location-photo {
    width: 100%; /* 图片宽度占满容器 */
    height: 100%; /* 图片高度占满容器 */
    object-fit: cover; /* 保持图片比例并裁剪 */
    border-radius: 5px; /* 照片圆角 */
  }
  
  .location-details {
    flex-grow: 1; /* 使细节部分填充剩余空间 */
    padding-left: 20px; /* 左侧间距 */
  }
  
  .location-name {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 用省略号表示超出部分 */
  }
  
  .location-number {
    margin-top: 10px; /* 上方间距 */
    font-weight: bold; /* 加粗 */
  }
  </style>
  